<template>
	<view class="playMusic">
		<view class="musicInfo">
			<u-avatar :src="$store.state.currentMusic.picUrl" mode="square"></u-avatar>
			<view class="musicName">{{$store.state.currentMusic.name}}</view>
			<text class="musicArtic"></text>
		</view>
		<view class="control">
				<i class="iconfont icon-zanting" v-show="ifPlay"  @click="puaseMusic()"> </i>
				<i class="iconfont icon-iconset0481" v-show="!ifPlay" @click="playMusic()"></i>
		</view>
	</view>
</template>

<script>
	export default {
		name:"myAudeo",
		data() {
			return {
				src:'',
				ifPlay:true
			};
		},
		created(){
		
		},
		methods:{
			puaseMusic(){
				
				if(this.$music.info.url){
					this.$music.puase()
					this.ifPlay=this.$music.ifPlay
					
				}
			
			},
			playMusic(){
				
				if(this.$music.info.url){
					this.$music.play()
					this.$nextTick(function(){
						this.ifPlay=this.$music.ifPlay
					
					})
					
				}
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.playMusic{
		width: 100%;
		height: 100rpx;
		
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.musicInfo{
			margin-left: 40rpx;
			height: 100%;
			width: 75%;
			
			display: flex;
			align-items: center;
			.musicName{
				height: 100rpx;
				line-height: 100rpx;
				color: black;
				margin-left: 30rpx;
			}
			.musicArtic{
				
			}
		}
		.control{
			margin-right: 20rpx;
			i{
				font-size: 60rpx;
			}
			
		}
		
	}
	
	
</style>
